import React, { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { useTranslation, withSSR } from 'react-i18next';
import { setLocale } from 'store/app/actions';
import { Locale } from 'store/app/types';
import HeaderBar from "../../components/HeaderBar/HeaderBar";

const App: React.FC<any> = () => {
    const { t } = useTranslation();
    const dispatch = useDispatch();
    const handleLocaleChange = useCallback(
        (e: React.FormEvent<HTMLButtonElement>) => {
            dispatch(setLocale(e.currentTarget.value as Locale));
        },
        [dispatch]
    );

    return (
        <React.Fragment>
            <HeaderBar />
            <div style={{
                height: '120vh'
            }}>content</div>
            {/*<Features />*/}
            {/*<h2>{t('i18n-example')}</h2>*/}
            {/*<p>*/}
                {/*<button value="zh_CN" onClick={handleLocaleChange}>*/}
                    {/*简体中文*/}
                {/*</button>*/}
                {/*<button value="en_US" onClick={handleLocaleChange}>*/}
                    {/*English*/}
                {/*</button>*/}
            {/*</p>*/}
        </React.Fragment>
    );
};

export default App;
